@import "/src/styles/variables";

$marginLeft15: 25px;
$liWidth: (100% - 1% * 3) / 4;
.subject-container {
  margin-top: $marginTopMain;
  position: relative;

  .motto {
    @include motto;
  }

  ::v-deep #tab-home {
    @include tabHome;
  }

  ::v-deep .el-tab-pane {
    padding-left: 15px;

    .subject-box {
      border-left: 1px solid $textColor;

      .subject-type {
        margin-left: $marginLeft15;

        & > h3 {
          position: relative;
          height: 30px;
          line-height: 30px;
          color: $textHoverColor2;
          font-size: 18px;
          margin-bottom: 10px;

          span {
            display: block;
            position: absolute;
            left: -$marginLeft15;
            top: 0;
            width: 30px;
            text-align: center;
            border-radius: 50%;
            background: $textHoverColor2;
            color: #FFFFFF;
            transform: translateX(-50%);
            z-index: 999;
          }
        }

        ul {
          @include clearfix;

          li {
            width: $liWidth;
            float: left;
            margin-right: 1%;
            margin-bottom: 15px;
            background: #FFFFFF;
            @include transitionStyle(0.3s);
            @include boxShadow;

            &:hover {
              transform: translateY(-6px);
              cursor: pointer;

              h3 {
                color: $textHoverColor2;
              }
            }

            &:nth-child(4n) {
              margin-right: 0;
            }

            .img-box {
              width: 100%;
              height: 160px;
              position: relative;

              span {
                position: absolute;
                right: 30px;
                top: 15px;
                background: rgba(232, 40, 74, .8);
                color: #fff;
                padding: 3px 8px;
                font-size: 12px;
                border-radius: 3px;
                z-index: 10;
              }
            }

            h3 {
              font-size: 14px;
              line-height: 1.4;
              background: #fff;
              font-weight: 400;
              height: 38px;
              margin: 15px 10px;
              @include textNumberLine(2);
            }
          }
        }
      }
    }
  }
}
